<img src="images/back.svg"
     (click)="toggleSearch()"
     [class.visible]="searchOpen"
     class="back"
     alt="Stop searching movies"/>

<input #searchField
       type="text"
       [placeholder]="messages.searchHint"
       (input)="updateSearchQuery(searchField.value)"
       [class.visible]="searchOpen"/>

<div class="buttons" (click)="toggleSearch()">
  <img alt="Search for movies" src="images/search.svg" class="app-bar-button search" [class.visible]="!searchOpen"/>
  <img alt="Stop searching movies" src="images/close.svg" class="app-bar-button close" [class.visible]="searchOpen"/>
</div>